<template>
	<div class="info">
		<i class="icon-sousuo icon" @click="handleSearchClick"></i>
		<i class="icon-tongzhi icon"></i>
		<i class="icon-bangzhu icon"></i>
		<img src="@/assets/png/默认头像.png" alt="用户头像">
		<span >{{userName}}</span>
	</div>
</template>

<script>
	export default {
		name: "Info",
		methods: {
			handleSearchClick() {
				console.log("搜索");
			}
		},
		data () {
			return {
				userName: "username"
			}
		}
	}
</script>

<style>
	.info {
		position: relative;
		right: 16px;
		top: 20px;
		float:right;
	}
	
	.info *{
		vertical-align: middle;
		margin-right: 20px;
	}
	
	.info i {
		display:inline-block;
		margin-right: 36px;
	}
	
	.icon:hover {
		transform: scale(1.45);
	}
</style>
